<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="div_id1">
    <div id="div_id2">
        <div id="div_id3">
            <div id="div_id4">
                <button id="btn_id">按钮</button>
            </div>
        </div>
        //冒泡只会影响自己和自己的上级，直到dom最上层
        <div id="div_id5">
            <button>按钮2</button>
        </div>
    </div>
</div>

<script>
    document.getElementById('btn_id').addEventListener('click',function () {
        console.log('button_click');
    });
    document.getElementById('div_id4').addEventListener('click',function () {
        console.log('div4_click');
    });
    document.getElementById('div_id3').addEventListener('click',function () {
        console.log('div3_click');
    });
    document.getElementById('div_id2').addEventListener('click',function () {
        console.log('div2_click');
    });
    document.getElementById('div_id1').addEventListener('click',function () {
        console.log('div1_click');
    });
    document.getElementById('div_id5').addEventListener('click',function () {
        console.log('div5_click');
    });
</script>

</body>
</html>